<template>
	<uni-popup
		ref="popup"
		:mask-click="false"
		style="top: 100px"
	>
		<xh-title-bar
			:title="title"
			hideBack
		/>
		<view style="background: #fff">
			<view class="form-content">
				<slot></slot>
			</view>
			<view class="popup-footer">
				<button @click="onClose">{{ closeText }}</button>
				<button
					@click="onOk"
					type="primary"
				>
					{{ okText }}
				</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
// 导入组件
export default {
	// 注册组件
	// components: {
	// 	SafeContainer
	// },
	props: {
		title: {
			type: String,
			default: 'title',
		},
		closeText: {
			type: String,
			default: '关闭',
		},
		okText: {
			type: String,
			default: '确定',
		},
	},
	data() {
		return {};
	},
	methods: {
		onClose() {
			this.close();
			this.$emit('close');
		},
		onOk() {
			this.$emit('ok');
		},
		open(position = 'top') {
			this.$refs.popup.open(position);
		},
		close() {
			this.$refs.popup.close();
		},
	},
	watch: {},
};
</script>

<style lang="scss" scoped>
.popup-title {
	line-height: 45px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	height: 45px;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
}

.popup-footer {
	display: flex;

	button {
		flex-grow: 1;
		border-radius: 0;

		&:last-of-type {
			border-left: none;
		}
	}
}

.form-content {
	padding: 10px;
}

.btn-wrapper {
	display: flex;

	button {
		flex-grow: 1;
		border-radius: 0;

		&:last-of-type {
			border-left: none;

			&::after {
				border-left: none;
			}
		}

		&::after {
			border-radius: 0;
		}
	}
}
</style>
